* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@keyframes slide {
    0%, 15% {
        transform: translateX(0);
    }
    20%, 35% {
        transform: translateX(-200px);
    }
    40%, 55% {
        transform: translateX(-400px);
    }
    60%, 75% {
        transform: translateX(-600px);
    }
    80%, 100% {
        transform: translateX(-800px);
    }
}

.container {
    width: 200px;
    height:200px;
    overflow: hidden;
    text-align: center;
    margin: 100px auto;
}

.slide {
    width: 502%;
    animation: slide 20s ease-out infinite alternate;
}

.slider {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    float: left;
}

.slider span {
    display: inline-block;
    margin: 50% auto;
    transform: translateY(-50%);
    font-size: 80px;
    font-weight: 800;
}